<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->
<sp-basic-view [showBackLink]="false" [padding]="true">
    <div
        nav
        fxFlex="100"
        fxLayoutAlign="start center"
        fxLayout="row"
        class="pl-10"
    >
        <button
            *ngIf="hasWritePrivilege"
            mat-button
            mat-raised-button
            color="accent"
            data-cy="create-new-asset-button"
            (click)="createNewAsset()"
        >
            <i class="material-icons">add</i>&nbsp;New asset
        </button>
        <div fxFlex fxLayout="row" fxLayoutAlign="end center">
            <button
                mat-icon-button
                matTooltip="Refresh assets"
                matTooltipPosition="below"
                color="accent"
                (click)="loadAssets()"
            >
                <i class="material-icons"> refresh </i>
            </button>
        </div>
    </div>
    <div fxFlex="100" fxLayout="column">
        <sp-basic-header-title-component
            title="Assets"
        ></sp-basic-header-title-component>
        <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
            <div fxFlex="90" fxLayout="column">
                <sp-table
                    fxFlex="100"
                    [columns]="displayedColumns"
                    [dataSource]="dataSource"
                    matSort
                >
                    <ng-container matColumnDef="name">
                        <th mat-header-cell mat-sort-header *matHeaderCellDef>
                            Asset
                        </th>
                        <td
                            mat-cell
                            *matCellDef="let asset"
                            data-cy="assets-table"
                        >
                            <div fxLayout="row" fxLayoutAlign="start center">
                                <div
                                    fxLayoutAlign="center start"
                                    fxLayout="column"
                                >
                                    <div>
                                        <b>{{ asset.assetName }}</b>
                                    </div>
                                    <div>
                                        <small>
                                            {{ asset.assetDescription }}</small
                                        >
                                    </div>
                                </div>
                            </div>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="action">
                        <th
                            mat-header-cell
                            *matHeaderCellDef
                            style="justify-content: center"
                        ></th>
                        <td mat-cell *matCellDef="let asset">
                            <div fxLayout="row" fxLayoutAlign="end center">
                                <button
                                    color="accent"
                                    mat-icon-button
                                    matTooltip="Show info"
                                    matTooltipPosition="above"
                                    (click)="goToDetailsView(asset)"
                                >
                                    <i class="material-icons">search</i>
                                </button>
                                <button
                                    *ngIf="hasWritePrivilege"
                                    color="accent"
                                    mat-icon-button
                                    matTooltip="Edit asset"
                                    matTooltipPosition="above"
                                    data-cy="edit-asset-button"
                                    (click)="goToDetailsView(asset, true)"
                                >
                                    <i class="material-icons">edit</i>
                                </button>

                                <button
                                    *ngIf="hasWritePrivilege"
                                    color="accent"
                                    mat-icon-button
                                    matTooltip="Delete asset"
                                    data-cy="delete"
                                    matTooltipPosition="above"
                                    (click)="deleteAsset(asset)"
                                >
                                    <i class="material-icons">delete</i>
                                </button>
                            </div>
                        </td>
                    </ng-container>
                </sp-table>
            </div>
        </div>
    </div>
</sp-basic-view>
